<template>
  <!-- 用户主页 -->
  <div id="user">
    <!-- 头部2组件 -->
    <Header2 :userData="userData" />
    <!-- user主内容区组件 -->
    <UserMain />
    <!-- 母菜单列表组件 -->
    <FileListMenu />
    <!-- 子菜单列表组件 -->
    <FileItemMenu />
    <!-- 笔记名输入框组件 -->
    <SetName :userData="userData" />
    <!-- 文档密码输入框组件 -->
    <FilePassword />
    <!-- 设置组件 -->
    <Setting :userData="userData" v-if="$store.state.showSetting" />
    <!-- 遮罩 -->
    <Overlay v-if="$store.state.showSetting" />
  </div>
</template>

<script>
// 引入header2组件
import Header2 from "@/components/global/Header2Cps.vue";
import UserMain from "@/components/user/userMainCps.vue";
import FileListMenu from "@/components/user/fileListMenuCps.vue";
import FileItemMenu from "@/components/user/fileItemMenuCps.vue";
import SetName from "@/components/user/setNameCps.vue";
import FilePassword from "@/components/user/filePasswordCps.vue";
import Setting from "@/components/user/settingCps";
import Overlay from "@/components/global/OverlayCps";
export default {
  name: "user",
  components: {
    Header2,
    UserMain,
    FileListMenu,
    FileItemMenu,
    SetName,
    FilePassword,
    Setting,
    Overlay,
  },
  data() {
    return {
      // 用户信息
      userData: {},
      // 文件列表数据
      // fileListData: require("@/assets/json/noteList.json"),
      // fileListData:[],
    };
  },
  created() {
    // document点击事件
    document.addEventListener("click", (e) => {
      // 排序列表
      const sortList = document.querySelector(".sortList");
      // 排序选择器
      const sort = document.querySelector(".sort");
      // 如果sortList不为null
      if (sortList != null) {
        // 如果点击的不是sortList和sort元素
        if (!sortList.contains(e.target) && !sort.contains(e.target)) {
          // 隐藏排序列表
          sortList.style.padding = "";
          sortList.style.height = "";
        }
      }

      // 母菜单列表
      const fileListMenu = document.querySelector(".fileListMenu");
      // 添加文件按钮
      const addFile = document.querySelector(".addFile");
      // 如果fileListMenu不为null
      if (fileListMenu != null) {
        // 如果点击的不是fileListMenu和addFile元素
        if (!fileListMenu.contains(e.target) && !addFile.contains(e.target)) {
          // 隐藏新建列表
          fileListMenu.style.height = "";
          setTimeout(() => {
            fileListMenu.style.padding = "";
          }, 100);
        }
      }

      // 子菜单列表
      const fileItemMenu = document.querySelector(".fileItemMenu");
      // 如果fileItemMenu不为null
      if (fileItemMenu != null) {
        // 如果点击的不是fileItemMenu
        if (!fileItemMenu.contains(e.target)) {
          // 隐藏新建列表
          fileItemMenu.style.height = "";
          setTimeout(() => {
            fileItemMenu.style.padding = "";
          }, 100);
        }
      }
    });
  },
  mounted() {
    // 获取用户数据
    this.getUserData();

    // 设置监听窗口大小事件，当窗口大小改变时回调handleResize方法
    window.addEventListener("resize", this.handleResize);
    // 调用窗口回调事件
    this.handleResize();

    this.$bus.$on("reGetUserData", (data) => {
      console.log("向服务器请求userData数据");
      this.userData = {
        id: "132874123",
        phone: "17366750637",
        email: "city252@qq.com",
        wechat: "city252",
        nickName: "东洲",
        sex: 1,
        age: 18,
        startTime: "2022-02-05 12:08:54",
        disableTime: "",
        portraitUrl:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F11%2F20200111144216_ujchy.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648196969&t=d879e050e7e50b12e35bbc09e7a62247",
        grade: 1,
        student: true,
        password: "123456",
        filePassword: "123qwe",
      };
    });
  },
  beforeDestroy() {
    this.$bus.$off("reGetUserData");
  },
  methods: {
    // 窗口大小改变回调
    handleResize() {
      // 通过vuex修改窗口高度
      this.$store.commit("setScreenHeight", document.body.clientHeight);

      // console.log(this.$store.state.screenHeight);
    },
    async getUserData() {
      // console.log("获取用户信息");
      const { data: res } = await this.$http.getMemberInfo();
      console.log(res.data.userInfo);
      // setTimeout(()=>{
      this.userData = res.data.userInfo;
      // 设置当前文件路径
      // this.$store.commit("setNowPath", this.userData.id, "push");
      this.$store.commit("setNowPath", { id: this.userData.id, type: "push" });

      // },3000)
      // 获取文件列表数据
      // this.getNoteFun();
      this.$tools.getNote(this, this.userData.id);
    },
  },
};
</script>

<style lang="less" scoped>
#user {
  width: 100%;
  height: 100%;
  font-size: 16px;
  position: relative;
}
</style>